<template>
  <div class="common-charts-container">
    <div class="common-charts-item">
      <div class="effect-container gradient-background"></div>
      <div class="bottom-title">
        <span class="card-tag">渐变背景</span>
      </div>
    </div>
    <div class="common-charts-item">
      <div class="effect-container">
        <canvas id="bubbly-bg" style="height: 100%;width: 100%"></canvas>
      </div>
      <div class="bottom-title">
        <span class="card-tag">移动气泡背景</span>
      </div>
    </div>
    <div class="common-charts-item">
      <div class="bg-container">
        <div class="content">BLEND</div>
      </div>
      <div class="bottom-title">
        <span class="card-tag">CSS 混合模式 mix-blend-mode属性</span>
      </div>
    </div>
    <div class="common-charts-item">
      <div class="wave-container effect-container">
        <canvas ref="canvas"></canvas>
      </div>
      <div class="bottom-title">
        <span class="card-tag">波浪效果</span>
      </div>
    </div>
  </div>
</template>

<script>
import bubbly from "bubbly-bg";

export default {
  name: "Background",
  data() {
    return {
      canvas: null,
      canvasWidth: 0,
      canvasHeight: 0,
      xOffset: 0,
      speed: 0
    };
  },
  mounted() {
    if (document.querySelector("#bubbly-bg")) {
      // 有点问题，好像引入的不对
      // bubbly({
      //   animate: true, // default is true
      //   blur: 1, // default is 4
      //   bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
      //   bubbles: 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);
      //   canvas: document.querySelector("#bubbly-bg"), // default is created and attached
      //   colorStart: "#4c004c", // default is blue-ish
      //   colorStop: "#1a001a",// default is blue-ish
      //   compose: "lighter", // default is "lighter"
      //   shadowColor: "#0ff", // default is #fff
      //   angleFunc: () => Math.random() * Math.PI * 2, // default is this
      //   velocityFunc: () => 0.1 + Math.random() * 0.5, // default is this
      //   radiusFunc: () => 4 + Math.random() * 25 // default is 4 + Math.random() * width / 25
      // })
      
      // 画波浪
      const canvas = this.$refs.canvas;
      this.canvas = canvas;
      this.canvasWidth = canvas.width;
      this.canvasHeight = canvas.height;
      const ctx = canvas.getContext("2d");
      this.drawSin(ctx);
      this.xOffset = 0; // 初始偏移
      this.speed = 0.1; // 偏移速度
      requestAnimationFrame(this.draw.bind(this, canvas));
    }
  },
  methods: {
    draw() {
      const canvas = this.canvas;
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 曲线绘制
      this.drawSin(ctx, this.xOffset);
      this.xOffset += this.speed;
      requestAnimationFrame(this.draw.bind(this));
    },

    drawSin(ctx, xOffset = 0) {
      const points = [];
      const canvasWidth = this.canvasWidth;
      const canvasHeight = this.canvasHeight;
      const startX = 0;
      const waveWidth = 0.1; // 波浪宽度,数越小越宽
      const waveHeight = 20; // 波浪高度,数越大越高
      // const xOffset = 0; // 水平位移

      ctx.beginPath();
      for (let x = startX; x < startX + canvasWidth; x += 20 / canvasWidth) {
        const y = waveHeight * Math.sin((startX + x) * waveWidth + xOffset);
        points.push([x, canvasHeight / 2 + y]);
        ctx.lineTo(x, canvasHeight / 2 + y);
      }
      ctx.lineTo(canvasWidth, canvasHeight);
      ctx.lineTo(startX, canvasHeight);
      ctx.lineTo(points[0][0], points[0][1]);
      ctx.stroke();
    }
  }
};
</script>

<style scoped lang="scss">
@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-background {
  color: #fff;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

.bg-container {
  height: 100%;
  background-color: #ee7752;
  .content {
    font-weight: bold;
    text-align: center;
    background: #fff;
    color: #000;
    mix-blend-mode: lighten;
    box-sizing: border-box;
    display: block;
    font-size: 4em;
    padding: 1em;
    width: 6em;
    height: 3em;
    margin: auto;
    margin-top: 80px;
  }
}
.wave-container {
  canvas {
    height: 100%;
    width: 100%;
  }
}
</style>
